package com.kmmlearn.findtime.ui.animation

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ContentTransform
import androidx.compose.animation.EnterTransition
import androidx.compose.animation.ExitTransition
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp


infix fun EnterTransition.with(exit: ExitTransition) = ContentTransform(this, exit)

@Composable
fun AnimatedContentDemo() {
    Row {
        var count by remember { mutableStateOf(0) }

        Button(onClick = { count++ }) {
            Text("Add")
        }

        // 可以使用contentTransform参数指定动画
        val contentTransform =
            slideInHorizontally(initialOffsetX = { -it }) + fadeIn() with slideOutHorizontally(
                targetOffsetX = { it }) + fadeOut()


        // 默认为淡入淡出动画
        AnimatedContent(targetState = count, transitionSpec = { contentTransform }) {
            Text(
                text = "Count: $it",
                fontSize = 36.sp,
                modifier = Modifier
                    .padding(10.dp)
                    .background(Color.Blue)
                    .fillMaxWidth()
            )
        }

    }
}


@Composable
fun SizeTransformDemo() {
    var expanded by remember { mutableStateOf(false) }

    Surface (
        color = MaterialTheme.colorScheme.primary,
        onClick = { expanded = !expanded }
    ) {
        AnimatedContent(targetState = expanded,
            transitionSpec = {
                fadeIn(animationSpec = tween(150, 150)) with fadeOut(animationSpec = tween(150)) using SizeTransform {
                    initialSize, targetSize ->
                    if (targetState) {
                        keyframes {
                            IntSize(targetSize.width, targetSize.height) at 150
                            durationMillis = 300
                        }
                    } else {
                        keyframes {
                            IntSize(initialSize.width, initialSize.height) at 150
                            durationMillis = 300
                        }
                    }
                }
            }
            ) {
            if(it) {
                Expanded()
            } else {
                ContentIcon()
            }
        }
    }
}

@Composable
fun Expanded() {
    Text(
        text = "Expanded 如上面的例子中，targetContent是一个小尺寸的icon, targtContent是一段大尺寸的文本，从icon到文本的切换过程中，可以使用SizeTransform实现尺寸变化的过渡动画。在SizeTransform中可以通过关键帧keyframes指定Size在某一个时间点的尺寸，以及对应的动画时长。比如例子中表示expend过程持续时间为300ms，在150ms前，高度保持不变，宽度逐渐增大，而在到达150ms之后，宽度到达目标值将不再变化，高度再逐渐增大",
        fontSize = 30.sp,
        modifier = Modifier
            .padding(10.dp)
            .background(Color.Blue)
            .fillMaxWidth()
    )
}

@Composable
fun ContentIcon() {
    Text(
        text = "ContentIcon",
        fontSize = 30.sp,
        modifier = Modifier
            .padding(10.dp)
            .background(Color.Red)
    )
}